<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%><%-- ${fn:length(list)} --%>
<script src="calendar_beans_v2.0.js" type="text/javascript"
	charset="utf-8"></script>
<script src="jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script>
	var local_no="0";
	var theater_no="0";
	var movie_no="0";
	var timetable_no="0";	// 상영관, 영화, 시작시간 정보 알 수 있음...
	var vaildSeat=parseInt(0);
	var adultCount= parseInt(0);
	var youthCount=parseInt(0);
	 var checkSeat =parseInt(0);
	 var age=${requestScope.list.voAge }
	var voAge = parseInt(age);
	$(document).ready(function() {
		CalAddCss(); // !!제일 상단에 필수!!		
		initCal({id : "cal2",type : "day",today : "y",	icon : "y",});
		
		$("#movieList").change(function(){			
			movie_no= $("#movieList").val();		
			selectOptionReset();	
				if($("#youthgrade").val()==""){					
					youthSelect();
				}
				
				$.ajax({
					type:"post",
					url:"reservation.do",
					data:"command=getLocalListAndMoiveGrade&movie_no="+movie_no,
					dataType:"json",
					success:function(data){		
						// 등급에 따라 어른, 청소년 선택
						for(i=0; i<data.list.localList.length; i++){
							$("#localList").append("<option value="+data.list.localList[i].loc_no+">"+data.list.localList[i].loc+"</option>");
							if(data.list.movie_grade=="0"){
								show();
							}else if(data.list.movie_grade=="18"){ 	
								showOrHide(data.list.movie_grade);
							}else if(data.list.movie_grade=="15"){
								showOrHide(data.list.movie_grade);
							}else if(data.list.movie_grade=="12"){
								showOrHide(data.list.movie_grade);
							}
					
					/* 	
						if(voGrade=="18" || voGrade=="15" || voGrade=="12"){
							alert(voGrade+"미만 관람불가");
							$("#adultgrade").hide();
							$("#youthgrade").hide();		
							$("#seat").hide();		
						}else{
							if(data.list.movie_grade!=18){
								$("#adultgrade").show();
								$("#youthgrade").show();		
								$("#seat").show();	
							}else{
								$("#youthgrade").hide();
							}*/
						} 
					}
				});// ajax	
			
			
		});//change
		// 지역정보에 해당하는 영화관 리스트
		$("#localSpan").on("change","#localList",function() {
			$("#theaterList").empty().append("<option value=''>영화관선택</option>");
			$("#timetableList").empty().append("<option value=''>시간선택</option>");	
			local_no = $("#localList").val();	
			if(movie_no==""){
				alert("영화를 선택하세요!");
				return false;
			}else{
				$.ajax({
					type:"post",
					url:"reservation.do",
					data:"command=getTheaterListByLocal&local_no="+local_no+"&movie_no="+movie_no,
					dataType:"json",
					success:function(data){			
						var option="<select id='theaterList' name='theater_no' size='14' style='width:120px'>";				
						option+="<option value=''>영화관선택</option>";
						for(i=0; i<data.theater.length; i++){
							option+="<option value="+data.theater[i].THEATER_NO+">"+data.theater[i].THEATER+"</option>";
						}
						$("#theater").html(option+"</select>"); 
					}
				}); // ajax			
			}
		}); //change		 
		
		$("#theater").on("change","#theaterList",function(){		
			$("#timetableList").empty().append("<option value=''>시간선택</option>");	
			theater_no= $("#theaterList").val();		
			if(movie_no=="0"){
				alert("영화를 선택하세요");
			}else if(theater_no==""){
				alert("지역 선택하세요");
			}
			
			
		});//on		
		// 날짜 선택 안하고 상영시간표 select를 클릭한 경우 
		$("#time_table").on("change","#timetableList",function(){
			timetable_no=$("#timetableList").val();
			if(movie_no=="0"){
				alert("영화를 선택하세요");
			}else if(local_no=="0"){
				alert("지역 선택하세요");
			}else if(theater_no=="0"){
				alert("영화관 선택하세요");
			}else if(timetable_no==""){
				alert("날짜 선택하세요");
			}
		});


		$("#time_table").on("change","#timetableList",function(){
			timetable_no=$("#timetableList").val();
			
			$.ajax({
				type:"post",
				url:"reservation.do",
				data:"command=getTimeTableList&movie_no="+movie_no+"&theater_no="+theater_no+"&date="+$("#cal2").val(),
				dataType:"json",
				success:function(data){		
					for(var i=0; i<data.timeList.length; i++){
 						if(data.timeList[i].NO==timetable_no){ 							
 							vaildSeat=data.timeList[i].SEAT_CAPACITY-data.timeList[i].CONFIRMEDSEAT;
						}
 					}					
				}				
			});// ajax
		
			
		}); //change
		
		
		
		
		 $("#reservationForm").submit(function(){
			 
			 adultCount=  parseInt($("#adult option:selected").val());
			 youthCount=  parseInt($("#youth option:selected").val());
			 checkSeat = vaildSeat-adultCount-youthCount;
		 
			 if($("#movieList").val()==null){
				 alert("영화를 선택하세요");
				 return false;
			 }
			 if($("#localList").val()==null){
				 alert("지역 선택하세요");
				 return false;
			 } 
			 if($("#theaterList").val()==null){
				 alert("영화관을 선택하세요");
				 return false;
			 } 			 
			 if($("#cal2").val()=="날짜선택"){
				 alert("날짜를 선택하세요");
				 return false;
			 } 
			 if($("#timetableList").val()==null){
				 alert("상영시간을 선택하세요");
				 return false;
			 }			
			 
			 if( $("#youth").val()=="0"){
				 if($("#adult").val()=="0"){
					 alert("매수를 선택하세요");
					 return false;
				 }
			 }
			 if(($("#adult").val()=="0" && $("#youth").val()=="0")){
				 alert("매수를 선택하세요");
				 return false;
			 }
			 if(timetable_no=="soldout"){
					alert("매진");
					return false;
				}
			 if(0>checkSeat){
				 alert("  잔여좌석 부족!\n"+vaildSeat+"좌석 예매 가능!");
				 return false;
			 }
			location.href="reservation.do?"+$(this).serialize();
		}); 
		 // 리셋부분....
		 $("#resetBtn").click(function(){
			 local_no="0";
			 theater_no="0";
			 movie_no="0";
			 timetable_no="0";	// 상영관, 영화, 시작시간 정보 알 수 있음...
			 $("#reservationForm").get(0).reset();
			 $("#adultgrade").show();
			 $("#youthgrade").show();		
			 $("#seat").show();	
			 selectOptionReset();
			 youthSelect();
			 // 달력 초기화 
			 initCal({id : "cal2",type : "day",today : "y",	icon : "y",});		 
		 });//click
	});//ready
	
function youthSelect(){						
	var youthSelect="청소년";
	youthSelect+="<select id='youth' name='youth'>";
	youthSelect+="<c:forEach begin='0' end='5' var='i'>";
	youthSelect+="<option value='${i }'>${i }</option>";
	youthSelect+="</c:forEach></select>";
	$("#youthgrade").html(youthSelect);
}
function selectOptionReset(){
	$("#localList").empty().append("<option value=''>지역선택</option>");
	$("#theaterList").empty().append("<option value=''>영화관선택</option>");
	$("#timetableList").empty().append("<option value=''>시간선택</option>");	
}

function showOrHide(grade){
	if(voAge>grade){
		show();
	}else{
		alert(grade+"미만 관람 불가");
		hide();
	}
}
function show(){
	$("#adultgrade").show();
	$("#youthgrade").show();		
	$("#seat").show();	
}
function hide(){
	$("#adultgrade").hide();
	$("#youthgrade").hide();		
	$("#seat").hide();	
}
</script>

<font class="title">예매 하기</font>
<hr color="#f5f5f5">
<c:choose>

	<c:when test="${sessionScope.vo!=null }">

		<!-- 영화선택 -->
		<form id="reservationForm" method="get">
		<table >
			<tr>
			<td width="100">	
				<input type="hidden" name="command" value="seat">
				<select id="movieList" name="movie_no" size="14" style="width:150px" >
					<option value="movieSel">영화선택</option>
					<c:forEach items="${requestScope.list.screening }" var="movieList">	
						<c:choose>	
						<c:when test="${movieList.MOVIE_GRADE=='0'}">		
						<option value="${movieList.MOVIE_NO }">[A]${movieList.MOVIE_TITLE }</option>
						</c:when>
						<c:otherwise>		
						<option value="${movieList.MOVIE_NO }">[${movieList.MOVIE_GRADE}]${movieList.MOVIE_TITLE }</option>
						</c:otherwise>
						</c:choose>			
					</c:forEach>
				</select>
			</td>
			<td>
				<!-- 지역선택 -->
				<span id="localSpan">
				<select id="localList"  size="14" style="width:120px">
					<option value="">지역선택</option>
				</select>
				</span>
			</td>
			<td>
				<!-- 영화관 선택 -->
				<span id="theater" >
				<select id="theaterList" name="theater_no" size="14" style='width:120px'>
					<option value="">영화관선택</option>
				</select>
				</span>	
			</td>
			<td valign="top">
				<!-- 날짜선택 -->
				<input type="text" id="cal2" size="26" readonly="readonly" value="날짜선택" name="date" >
			</td>
			<td>
				<!-- 상영시간표 -->
				<span id="time_table">
				<select id="timetableList" name="timetable_no" size="14" style='width:150px'>
					<option value="">시간선택</option>
				</select>
				</span>
			</td>
			</tr>
			<tr>
				<td valign="top" align="right" colspan="5">
					<span id="adultgrade">
					어른
					<select id="adult" name="adult">	
						<c:forEach begin="0" end="5" var="i">
						<option value="${i }">${i }</option>
						</c:forEach>
					</select>
					</span>
					<span id="youthgrade">				
					청소년
					<select id="youth" name="youth">
						<c:forEach begin="0" end="5" var="i">
							<option value="${i }">${i }</option>
						</c:forEach>
					</select>	
					</span>
					<input type="submit" id="seat" value="좌석선택">
					<input type="button" id="resetBtn" value="다시선택">
				</td>
			</tr>
		</table>
		</form>

	</c:when>
	<c:otherwise>
		<script>
		alert("회원전용 페이지 입니다...");
		location.href="index.jsp";
		</script>
	</c:otherwise>

</c:choose>